<template>
  <div class="app-container">
    <div class="build-container">
      <el-steps :active="active" finish-status="success">
        <el-step title="步骤 1" description="构建reader">1</el-step>
        <el-step title="步骤 2" description="构建writer">2</el-step>
        <el-step title="步骤 3" description="表映射">3</el-step>
        <el-step title="步骤 4" description="批量创建">4</el-step>
      </el-steps>

      <div v-show="active===1" class="step1">
        <Reader ref="reader" />
      </div>
      <div v-show="active===2" class="step2">
        <Writer ref="writer" />
      </div>
      <div v-show="active===3" class="step3">
        <Mapper ref="mapper" />
      </div>
      <div v-show="active===4" class="step4">
        <el-button type="primary" @click="createJob">批量创建任务</el-button>
      </div>

      <el-button :disabled="active===1" style="margin-top: 12px;" @click="last">上一步</el-button>
      <el-button v-show="active!==4" type="primary" style="margin-top: 12px;margin-bottom: 12px;" @click="next">下一步</el-button>
    </div>
  </div>
</template>

<script>
// import * as jobTemplate from '@/api/datax-job-template'
// import * as job from '@/api/datax-job-info'

import { insert as jobInsert } from '@job/api/job/info'
import { batchbuildJobJson } from '@data/api/data/datacollection'

// import Pagination from '@/components/Pagination'
import Reader from './reader.vue'
import Writer from './writer.vue'
// import clip from '@/utils/clipboard'
import Mapper from './mapper.vue'

export default {
  name: 'JsonBuild',
  components: { Reader, Writer, Mapper },
  data() {
    return {
      configJson: '',
      active: 1,
      templateName: '',
      jobTemplateSelectDrawer: false,
      list: null,
      currentRow: null,
      listLoading: true,
      total: 0,
      listQuery: {
        current: 1,
        size: 10,
        jobGroup: 0,
        triggerStatus: -1,
        jobDesc: '',
        executorHandler: '',
        userId: 0
      },
      blockStrategies: [
        { value: 'SERIAL_EXECUTION', label: '单机串行' },
        { value: 'DISCARD_LATER', label: '丢弃后续调度' },
        { value: 'COVER_EARLY', label: '覆盖之前调度' }
      ],
      routeStrategies: [
        { value: 'FIRST', label: '第一个' },
        { value: 'LAST', label: '最后一个' },
        { value: 'ROUND', label: '轮询' },
        { value: 'RANDOM', label: '随机' },
        { value: 'CONSISTENT_HASH', label: '一致性HASH' },
        { value: 'LEAST_FREQUENTLY_USED', label: '最不经常使用' },
        { value: 'LEAST_RECENTLY_USED', label: '最近最久未使用' },
        { value: 'FAILOVER', label: '故障转移' },
        { value: 'BUSYOVER', label: '忙碌转移' }
        // { value: 'SHARDING_BROADCAST', label: '分片广播' }
      ],
      triggerNextTimes: '',
      registerNode: [],
      jobJson: '',
      temp: {
        // id: undefined,
        jobGroup: '1',
        jobCron: '0 0 3 * * ? *',
        jobDesc: '',
        author: 'admin',
        executorRouteStrategy: 'FIRST',
        executorBlockStrategy: 'SERIAL_EXECUTION',
        // childJobId: '',
        // executorFailRetryCount: '',
        // alarmEmail: '',
        // executorTimeout: '',
        // userId: 0,
        // jobConfigId: '',
        executorHandler: 'dataIntegrationJsonHandler',
        glueType: 'BEAN',
        // jobJson: '',
        executorParam: '',
        // replaceParam: '',
        // jvmParam: '',
        // incStartTime: '',
        // templateId: 0
      }
    }
  },
  created() {
    // this.getJdbcDs()
  },
  methods: {
    next() {
      const fromTableList = this.$refs.reader.getData().tables
      const toTableList = this.$refs.writer.getData().tables
      // const fromTableName = this.$refs.reader.getData().tableName
      // 第一步 reader 判断是否已选字段
      if (this.active === 1) {
        // 实现第一步骤读取的表和字段直接带到第二步骤
        // this.$refs.writer.sendTableNameAndColumns(fromTableName, fromColumnList)
        // 取子组件的数据
        // console.info(this.$refs.reader.getData())
        this.active++
      } else {
        // 将第一步和第二步得到的字段名字发送到第三步
        if (this.active === 2) {
          this.$refs.mapper.sendTables(fromTableList, toTableList)
        }
        if (this.active !== 4) {
          this.active++
        }
      }
    },
    last() {
      if (this.active > 1) {
        this.active--
      }
    },
    // Create job
    createJob() {
      const readerData = this.$refs.reader.getData()
      const writeData = this.$refs.writer.getData()
      const readerTables = this.$refs.mapper.getLTables()
      const writerTables = this.$refs.mapper.getRTables()
      const rdbmsReader = {
        readerSplitPk: readerData.splitPk
      }
      const rdbmsWriter = {
        preSql: '',
        postSql: ''
      }
      const obj = {
        readerDatasourceId: readerData.datasourceId,
        readerTables: readerTables,
        writerDatasourceId: writeData.datasourceId,
        writerTables: writerTables,
        rdbmsReader: rdbmsReader,
        rdbmsWriter: rdbmsWriter,
      }
      // 调api
      batchbuildJobJson(obj).then((res) => {
         res.data.map((element, index) => {
          this.temp.executorParam = '{"jsonJobId" : "' + element + '"}'
          debugger
          console.log(this.getReaderData().datasourceInfo)
          this.temp.jobDesc = writerTables[index] + '【' + this.getReaderData().datasourceInfo  + '】'
          jobInsert(this.temp).then(() => {}).catch(function () { return });
          this.$message({
              message: '批量任务创建成功',
              type: 'success',
              duration: 2000,
              onClose: () => {
                // 重新加载，重置表单  todo 可以不需要刷新
                location.reload()
                
                //重置表单
                this.$refs.reader.resetForm()
                this.$refs.writer.resetForm()
                // 切回第一步
                this.active = 1
              }
            })
        })
      })
    },
    async handleCopy(text, event) {
      await navigator.clipboard.writeText(text)
      // clip(this.configJson, event)
    },
    getReaderData() {
      if(this.$refs.reader){
        return this.$refs.reader.getData()
      }
    },
    handleCurrentChange(val) {
      this.temp = Object.assign({}, val)
      this.temp.jobDesc = this.getWriterData().tableName + '【' + this.getReaderData().datasourceInfo  + '】'
      this.templateName = val.jobDesc
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
